<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ include file="/WEB-INF/views/public/include.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<!-- 页面编码 -->
	<meta charset="utf-8">
  	<!-- 手机浏览器禁止缩放, 页面大小默认为手机屏幕宽度 -->
  	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  	<!-- 允许IOS全屏显示网页 -->
  	<meta content="yes" name="apple-mobile-web-app-capable" />
  	<!-- 设置IOS状态栏为透明底色 -->
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
	<!-- 设置360浏览器渲染引擎为webkit -->
  	<meta name="renderer" content="webkit">
  	<!-- 设置APP标题 -->
  	<meta name="apple-mobile-web-app-title" content="青年电影志">
  	<!-- 关闭自动识别电话号码 -->
  	<meta name="format-detection" content="telephone=no">
	<!-- iPhone桌面图标 -->
	<link href="/resources/static/images/app-60@2x.png" sizes="120x120" rel="apple-touch-icon-precomposed">
  	<!-- 页面标题 -->
  	<title>青年电影志</title>
	<!-- 页面摘要描述 -->
  	<meta name="description" content="约吗">
  	<!-- 页面关键词 -->
  	<meta name="keywords" content="约大牛">

  	<!-- 基本样式载入 -->
  	<link rel="stylesheet" href="/resources/static/css/ionicons.min.css">
	<link rel="stylesheet" href="/resources/static/css/public.css">
	<!-- 基本脚本载入 -->
	<script src="/resources/static/js/plugins.min.js"></script>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
</head>
<body>
	<div id="app" class="site" data-controller="certificationPage">
		<div class="bar bar-footer bar-primary">
			<a href="#" class="nav-btn js-next-step">下一步</a>
		</div>
		<div id="content" class="site-content">
			<div class="inner">
				<div class="wizard-progress">
					<div class="is-active js-goto" data-step="1">基本信息</div>
					<div class="js-goto" data-step="2">个人及话题介绍</div>
					<div class="js-goto" data-step="3">提交审核</div>
				</div>
				<!-- END .wizard-progress -->
				<form:form commandName="certification" action="./certification.do" method="post" class="wizard-form js-wizard"  enctype="multipart/form-data">
					<div id="step1" class="wizard-step is-active">
						<div class="alert alert-info">
							在手机端填写资料，您可能会觉得不太方便，其实您只需要简要填写您的资料，提交之后我们的审核工作人员会和您联系，帮您处理您的资料。
						</div>
						<div class="form-group">
							<label class="control-label">姓名<span>*</span></label>
							<form:input path="realName" type="text" class="form-control js-required" placeholder="请输入姓名..."></form:input>
						</div>
						<div class="form-group">
							<label class="control-label">生日<span>*</span></label>
							<form:input path="birthday" type="date" class="form-control js-required" required="true"></form:input>
							<!-- END .col-sm-10 -->
						</div>
						<!-- END .form-group -->
						<div class="form-group">
							<label class="control-label">任职机构<span>*</span></label>
							<form:input path="company" type="text" class="form-control js-required" placeholder="请输入你所在公司名称..."></form:input>
						</div>
						<!-- END .form-group -->
						<div class="form-group">
							<label class="control-label">头衔/职业<span>*</span></label>
							<form:input path="profession" type="text" class="form-control js-required" placeholder="你是干什么的..."></form:input>
						</div>
						<!-- END .form-group -->
						<div class="form-group state-blank">
							<label class="control-label">工作年限<span>*</span></label>
							<div class="check-button-group">
								<form:radiobuttons path="jobYears" items="${jobMap }"></form:radiobuttons>
								<%--
								<label class="check-button-wrap">
									<form:radiobutton path="jobYears" value="1" checked="true"></form:radiobutton>
									<div class="check-button">三年以下</div>
								</label>
								<label class="check-button-wrap">
									<input type="radio" name="workYear">
									<form:radiobutton path="jobYears" value="2" checked="true"></form:radiobutton>
									<div class="check-button">3-5年</div>
								</label>
								<label class="check-button-wrap">
									<form:radiobutton path="jobYears" value="3" checked="true"></form:radiobutton>
									<div class="check-button">5-10年</div>
								</label>
								<label class="check-button-wrap">
									<form:radiobutton path="jobYears" value="4" checked="true"></form:radiobutton>
									<div class="check-button">10年以上</div>
								</label>
								--%>
							</div>
							<!-- END .check-button-group -->
						</div>
						<!-- END .form-group -->
						<div class="form-group">
							<label class="control-label">手机<span>*</span></label>
							<form:input path="phone" type="text" class="form-control js-phone" placeholder="常用联系手机号..."></form:input>
						</div>
						<!-- END .form-group -->
						<div class="form-group">
							<label class="control-label">邮箱<span>*</span></label>
							<form:input path="email" type="email" class="form-control js-email" placeholder="Email地址..."></form:input>
						</div>
						<!-- END .form-group -->
						<div class="form-group">
							<label class="control-label">常驻城市<span>*</span></label>
							<form:select path="city" items="${cityMap}"></form:select><br/>
						</div>
						<!-- END .form-group -->
						<div class="form-group">
							<label class="control-label">推荐人(推荐人必须已经是电影咖，选填)</label>
							<form:input path="presenter" type="text" class="form-control"></form:input>
						</div>
						<!-- END .form-group -->
					</div>
					<!-- END .wizard-step -->
					<div id="step2" class="wizard-step">
						<div class="form-group">
							<label class="control-label">个人照片（用于首页展示）<span>*</span></label>
							<label for="">照片：</label>
							<div class="pic-upload">
								<c:choose>
									<c:when test="${certification.img != null && certification.img != ''}">
										<img src="${certification.img}" class="js-photo-preview is-active" alt="">
									</c:when>
									<c:otherwise>
										<img src="" class="js-photo-preview" alt="">
									</c:otherwise>
								</c:choose>
								<input name="mediaId" type="hidden" id="photo" class="js-photo-input">
								<a role="button" class="js-photo-upload"></a>
							</div>
							<!-- END .pic-upload -->
							<p>如果不上传则用微信头像代替哦~</p>
						</div>
						<!-- END .form-group -->
						<div class="form-group">
							<label class="control-label">话题介绍<span>*</span></label>
							<%--
							<form:textarea path="hehe" id="" class="form-control js-required" rows="6" placeholder="请输入话题内容..."></form:textarea>
							--%>
						</div>
						<!-- END .form-group -->
						<div class="form-group">
							<label class="control-label">个人介绍<span>*</span></label>
							<form:textarea path="instruction" id="" class="form-control js-required" rows="6" placeholder="请输入自我介绍..."></form:textarea>
						</div>
						<div class="form-group">
							<label class="control-label">相关链接（选填）</label>
							<form:textarea path="reference" id="" class="form-control" rows="6" placeholder="相关链接..."></form:textarea>
							<!-- END .col-sm-10 -->
						</div>
						<!-- END .form-group -->
					</div>
					<!-- END .wizard-step -->
					<div id="step3" class="wizard-step">
						<div class="form-group">
							您提交申请之后，青年电影志将在2个工作日内作出反馈。过审
							后，您的电影咖页将直接面向所有用户公开。
						</div>
					</div>
					<!-- END .wizard-step -->
				</form:form>
				<!-- END .wizard-form -->
			</div>
			<!-- END .inner -->
		</div>
		<!-- END #content -->
	</div>
	<!-- END #page -->
	<!-- 页面脚本载入 -->
	<script src="/resources/static/js/app.js"></script>
</body>
</html>